<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			省份<select name="" id="provincialLevel" onchange="provincialLevelChange()">
				<option value="-1">请选择省份</option>
			</select>
			市区：<select name="" id="cityLevel" onchange="cityLevelChange()">
				<option value="-1">请选择市区</option>
			</select>
			县区：<select name="" id="countyLevel" onchange="countyLevelChange()">
				<option value="-1">请选择县区</option>
			</select>
		</div>
		<div id="">
			你选择的地址为：<label id="sitShow"></label>
		</div>
	</body>
	<script type="text/javascript">
		var provinceName=['福建省','江西省','广东省'];
		var cityName=[
			['厦门市','福州市','龙岩市'],
			['抚州市','赣州市','南昌市'],
			['深圳市','广州市','东莞市']
		];
		var countyName=[
			[['思明区','湖里区'],['台江区','闽清县'],['新罗区','长汀县']],
			[['南丰县','广昌县'],['寻乌县','宁都县'],['南昌县','西湖区']],
			[['福田区','罗湖区'],['越秀区','番禺区'],['莞城区','万江区']]
		];
		function countyLevelChange(){
			var provinceNameObject = document.getElementById('provincialLevel');
			var cityNameObject = document.getElementById('cityLevel');
			var countyNameObject = document.getElementById('countyLevel');
			var provinceShow=provinceName[provinceNameObject.value];
			var cityShow=cityName[provinceNameObject.value][cityNameObject.value];
			var countyShow=countyName[provinceNameObject.value][cityNameObject.value][countyNameObject.value];
			console.log(provinceShow,cityShow,countyShow)
			var sitShowObject=document.getElementById('sitShow');
			sitShowObject.innerText=provinceShow+'--'+cityShow+'--'+countyShow;
		}
		function cityLevelChange(){
			var provinceNameObject = document.getElementById('provincialLevel');
			var cityNameObject = document.getElementById('cityLevel');
			var countNameObject = document.getElementById('countyLevel');
			if(cityNameObject.value==-1){
				countNameObject.innerHTML=`<option value="-1">请选择市区</option>`;
				retreat;
			}
			countNameObject.innerHTML=`<option value="-1">请选择市区</option>`;
			var city=cityName[provinceNameObject.value];
			console.log(city);
			var count = countyName[provinceNameObject.value][cityNameObject.value];
			console.log(count);
			for(var i=0;i<count.length;i++){
				countNameObject.innerHTML+=`<option value="`+i+`">`+count[i]+`</option>`;
			}
		}
		function provincialLevelChange(){
			var provinceNameObject = document.getElementById('provincialLevel');
			var cityNameObject = document.getElementById('cityLevel');
			var countNameObject = document.getElementById('countyLevel');
			if(provinceNameObject.value==-1){
				cityNameObject.innerHTML=`<option value="-1">请选择市区</option>`;
				countNameObject.innerHTML=`<option value="-1">请选择县区</option>`;
				return;
			}
			cityNameObject.innerHTML=`<option value="-1">请选择市区</option>`;
			countNameObject.innerHTML=`<option value="-1">请选择县区</option>`;
			var city = cityName[provinceNameObject.value]
			// console.log(city);
			for(var i=0;i<city.length;i++){
				cityNameObject.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
			}
			
		}
		onload = function(){
			var provinceNameObject = document.getElementById('provincialLevel');
			for(var i=0;i<provinceName.length;i++){
				provinceNameObject.innerHTML+=`<option value="`+i+`">`+provinceName[i]+`</option>`;
			}
		}
	</script>
</html>
